<template>
  <div class="auxiliary">
    <Navbar :bg="navBg" :title="navTitle" />
    <div class="items">
      <div class="item" v-for="item in itemsTop" :key="item.id">
        <div class="title">{{ item.title }}</div>
        <van-switch v-model="item.status" size="22px" @change="onCellChange(item, $event)" />
      </div>
    </div>
    <div class="items">
      <div class="item" @click="sensorShow = true">
        <div class="title">传感器选择</div>
        <div class="value">{{ sensorText }}</div>
        <SvgIcon iconName="s9" color="#D7E5FC" size="10px" />
      </div>
    </div>
  </div>

  <div class="sensor-pop">
    <van-popup v-model:show="sensorShow" round position="bottom">
      <van-picker
        v-model="sensorVal"
        title="传感器选择"
        confirm-button-text="确定"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { funcItems, sensorItems } from '@/utils/enum.js'
import Navbar from '@/components/Navbar.vue'
import { ref, reactive, watch } from 'vue'
import { sendToNative_sendUartData } from '@/utils/base.js'
import { verifySum } from '@/utils/utils.ts'

import { useStore } from 'vuex'
const store = useStore()
console.log(store, 'store===')

const navBg = ref('#fff')
const navTitle = ref('辅助功能')
const sensorShow = ref(false)
// 传感器的 key value 值
const sensorVal = ref([0])
const sensorText = ref('')

const itemsTop = ref(funcItems)
// 传感器选择弹框数据
const columns = reactive(sensorItems())

// 初始化数据
const init = () => {
  console.log('init==')
  const info = store.state.deviceInfo
  console.log(info, 'info')
  itemsTop.value[0].status = info.heating === 1 ? true : false
  itemsTop.value[1].status = info.freeze === 1 ? true : false
  itemsTop.value[2].status = info.disinfect === 1 ? true : false

  sensorVal.value = [info.sensor]
  sensorText.value = info.sensor === 0 ? '自动' : info.sensor
}
init()

watch(
  () => store.state,
  val => {
    console.log('store数据变化了==', val)
    const { deviceInfo } = val
    if (deviceInfo) {
      init()
    }
  },
  { deep: true }
)

const onConfirm = ({ selectedOptions }: any) => {
  console.log(selectedOptions, 'selectedOptions')
  const { text, value } = selectedOptions[0]
  console.log(text)
  console.log(value)
  console.log(sensorVal.value[0])
  sensorShow.value = false
  const hexVal = value.toString(16).padStart(2, '0')
  const sum = verifySum(`0204000701${hexVal}`)
  sendToNative_sendUartData(`F1F10204000701${hexVal}${sum}7E`)
}
const onCancel = () => (sensorShow.value = false)

// 电辅热 电机防冻 排风消毒的数据变化事件
const onCellChange = (val: any, e: any) => {
  console.log(val, 'val')
  console.log(e, 'e')
  const { id } = val
  const hexVal = e ? '01' : '00'

  if (id === 1) {
    // 电辅热
    const sum = verifySum(`0204001101${hexVal}`)
    sendToNative_sendUartData(`F1F10204001101${hexVal}${sum}7E`)
  } else if (id === 2) {
    // 电机防冻
    const sum = verifySum(`0204001201${hexVal}`)
    sendToNative_sendUartData(`F1F10204001201${hexVal}${sum}7E`)
  } else if (id === 3) {
    // 排风消毒
    const sum = verifySum(`0204001301${hexVal}`)
    sendToNative_sendUartData(`F1F10204001301${hexVal}${sum}7E`)
  }
}

const emit = defineEmits([''])
const props = defineProps({
  propData: {
    type: String,
    default: ''
  }
})
console.log(props)
</script>
<style lang="less" scoped>
@import url(../assets/style/control.less);
</style>
